<template>
  <q-page padding>
    <div class="form-container">
      <div class="text-h5 q-mb-md">用户注册</div>
      <q-form @submit="onSubmitRegister" class="q-gutter-md">
        <q-input v-model="formData.uname" label="用户名" :rules="[
          val => !!val || '请输入用户名',
          val => val.length >= 3 || '用户名至少3个字符'
        ]" />

        <q-input v-model="formData.password" label="密码" type="password" :rules="[
          val => !!val || '请输入密码',
          val => val.length >= 6 || '密码长度至少6位'
        ]" />

        <q-input v-model="confirmPassword" label="确认密码" type="password" :rules="[
          val => !!val || '请确认密码',
          val => val === formData.password || '两次输入的密码不一致'
        ]" />

        <q-select v-model="formData.chapter" :options="chapterOptions" label="分会名称"
          :rules="[val => !!val || '请选择分会名称']" />
        <q-input v-model="formData.email" label="电子邮箱" type="email" :rules="[
          val => !!val || '请输入电子邮箱',
          val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || '请输入有效的邮箱地址'
        ]" />

        <q-input v-model="formData.phone" label="手机号码" :rules="[
          val => !!val || '请输入手机号码',
          val => /^1[3-9]\d{9}$/.test(val) || '请输入有效的手机号码'
        ]" />

        <div class="row justify-center q-gutter-sm">
          <q-btn label="注册" type="submit" color="primary" :loading="loading" />
          <q-btn label="返回登录" flat color="grey" @click="backToLogin" />
        </div>
      </q-form>
    </div>
  </q-page>
</template>

<script>
import { getAgencyList, register } from 'src/js/api'

export default {
  data() {
    return {
      loading: false,
      confirmPassword: '',
      formData: {
        uname: '',
        password: '',
        chapter: '',
        email: '',
        phone: ''
      },
      chapterOptions: [
      ]
    }
  },
  async created() {
    // 组件创建时获取分会列表
    await this.fetchAgencyList();
  },

  methods: {
    async fetchAgencyList() {
      try {
        this.loading = true;
        const res = await getAgencyList();
        if (res && res.data) {
          let data = res.data.data.data.list;
          // 假设返回的数据格式为 [{id: 1, name: '分会1'}, ...]
          this.chapterOptions = data.map(item => { return item.name });
          this.originalOptions = this.chapterOptions; // 保存原始选项
        } else {
          this.chapterOptions = [];
        }
      } catch (error) {
        console.error('获取分会列表失败:', error);
        this.$q.notify({
          type: 'negative',
          message: '获取分会列表失败'
        });
        this.chapterOptions = [];
      } finally {
        this.loading = false;
      }
    },
    async onSubmitRegister() {
      try {
        this.loading = true
        const res = await register(this.formData)

        this.$q.notify({
          type: 'positive',
          message: '注册成功'
        })

        // 注册成功后延迟跳转到登录页
        setTimeout(() => {
          this.backToLogin()
        }, 1500)
      } catch (error) {
        this.$q.notify({
          type: 'negative',
          message: '注册失败：' + error.message
        })
      } finally {
        this.loading = false
      }
    },

    backToLogin() {
      this.$router.push({ name: 'LoginPage' })
    }
  }
}
</script>

<!-- 添加样式部分 -->
<style scoped>
.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>
